<template>
  <div class="box">
    <header class="new-header">
      <span :class="item.icon" v-for="(item, index) of list" :key="index"></span>
      <span>米粒FM</span>
    </header>
    <div class="new-content">
      <ul>
        <li v-for="(news, newsindex) of newslist" :key="newsindex">
          <img :src="news.headimg" alt="">
          <p><span>{{news.truetime}}</span><span>{{news.time}}</span></p>
          <p>{{news.chatinfo}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {icon: 'iconfont icon-fanhui'}
      ],
      newslist: [
        {
          chatperson: 'chatperson1',
          time: '11:11',
          truetime: new Date(),
          headimg: 'https://gss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3468780367,166286784&fm=173&app=49&f=JPEG?w=218&h=146&s=C5F03CC4E4E119240FBA193103005050',
          chatinfo: '今天下雪了'
        },
        {
          chatperson: 'chatperson2',
          time: '11:11',
          truetime: new Date(),
          headimg: '/static/img/baby1.5e5ab86.jpg',
          chatinfo: '今天下雪了'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
// 头部
.box{
  .new-header{
    width:3.75rem;
    height:0.37rem;
    line-height:0.37rem;
    background:#ccc;
    span{
      &:nth-child(1){
      font-size:0.20rem;
      float:left;
      margin-left:0.18rem;
      };
      &:nth-child(2){
      font-size:0.20rem;
      float:right;
      width:0.94rem;
      font-size:0.14rem;
      text-align:center;
      margin-right:1.32rem;
      }
    }
  }
  // 聊天部分
  .new-content{
    overflow-y: scroll;
    flex:box;
    flex:1;
    ul{
      li{
        width:3.75rem;
        height:0.8rem;
        border-bottom:1px solid #ccc;
        img{
          width:0.4rem;
          height:0.4rem;
          border-radius:0.2rem;
          float:left;
          margin-top:0.19rem;
          margin-left:0.18rem
        };
        p{
          width:3rem;
          height:0.2rem;
          line-height:0.2rem;
          float:right;
          margin-right:0.11rem;
          &:nth-of-type(1){
            margin-top:0.19rem;
            span:nth-child(1){
              font-size:0.14rem;
              float:left
            }
            span:nth-child(2){
              font-size:0.10rem;
              float:right
            }
          };
          &:nth-of-type(2){
              font-size:0.12rem;
          }
        }
      }
    }
  }
}
</style>
